<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue第二天 数据驱动视图</title>
</head>
<body>
	<div id='app'>
		<!-- v-model 双向数据绑定的体现 只会体现在UI控件中 只能应用在有value属性的标签-->
		<!-- v-model语法糖 是v-bind:value 和 v-on:input 的组合体现 -->
		<input type="text" v-model='msg'>
		<input type="text" :value='msg' @input='valueChange'>
		{{msg}}
	</div>
	<script src="./node_modules/vue/dist/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
					msg:123
				}
			},
			methods:{
				valueChange(e){
					this.msg = e.target.value;
				}
			}
		})
	</script>
</body>
</html>
